<template>
<div class="information">
  <!-- 头部tab -->
  <div class="header-wrap">
    <span class="header-wrap-left"  @click="goback">
      <i class="iconback iconfont icon-fanhui"></i>
    </span>
    <span class="header-wrap-text">政务信息</span>
    <span class="header-wrap-right">
    </span>
  </div>
  <div class="information-box">
    <div class="information-content" v-for="(list,index) in Notice" :key="index">
      <div class='noticeSwiper-img-box' @click="goswiperlist(index)">
        <img class="noticeSwiper-img" :src="list.imgSrc" alt="">
      </div>
      <div class="noticeSwiper-content">
        <div class="noticeSwiper-list">
          <span class="noticeSwiper-tittle">{{list.title}}</span>
          <span class="noticeSwiper-price">{{list.time}}</span>
          <span class="noticeSwiper-rate">
            <div class="rate-box">
                <van-rate
                style="width: auto;margin-right:.1rem;"
                readonly
                v-model="list.value"
                allow-half
                void-icon="star"
                void-color="#6b5da6"
                color= '#ffa272'
                @change= 'change(index)'
                size= ".3rem"
                />
                <span class="rate-number">{{list.number}}</span>
            </div>
            <div class="rate-box">
                <span class="rate-content" @click="starnumber(index)" v-if="list.collectionShow"><img src="@/assets//images/collection-color.png" alt=""></span>
                <span class="rate-content" @click="starnumber(index)" v-else><img src="@/assets//images/collection.png" alt=""></span>
            </div>
          </span>
        </div>
      </div>   
    </div>
  </div>
</div>
</template>
<script>
import { Rate } from 'vant';
export default {
  data(){
    return{
      Notice : [
        {
          collectionShow:false,
          imgSrc:'http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg',
          title:'街道办信息',
          time:'2018-05-05',
          value: 2.5,
          number: 15
        },
        {
          collectionShow:true,
          imgSrc:'http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg',
          title:'街道办信息1',
          time:'2018-05-05',
          value: 3,
          number: 25
        },
        {
          collectionShow:false,
          imgSrc:'http://img5.duitang.com/uploads/item/201411/16/20141116124947_xBNxM.jpeg',
          title:'街道办信息2',
          time:'2018-05-05',
          value: 3.5,
          number: 5
        }
      ],
    }
  },
  methods:{
    starnumber(index){
      this.Notice[index].collectionShow = !this.Notice[index].collectionShow
    },
    goback(){
      this.$router.go(-1)
    }
  },
  components:{
    [Rate.name]: Rate
  }
}
</script>
<style scoped>
.information-box{
  padding-top: 1.5rem;
}
.information{
  background: #2e294e;
  margin:0 .3rem;
}
.information-content{
  margin-bottom: .35rem;
  height: 7.2rem;
}
.noticeSwiper{
  padding-bottom: 3rem;
  width: 100%;
  height: auto;
}
.noticeSwiper-img-box{
  width: 100%;
  height: 70%;
  overflow: hidden;
  border-radius: .2rem .2rem 0 0;
}
.noticeSwiper-img{
  width: 100%;
  height: 100%;
  border-radius: .2rem .2rem 0 0;
}
.swiper-slide{
  border-radius: .2rem;
  margin-right: .25rem!important;
}
.type{
  font-size: .32rem;
  display: flex;
  margin: 0 .25rem 0 .35rem;
  color: #fff;
  height: 1rem;
  line-height: 1rem;
}
.type span:nth-of-type(1){
  flex: 1;
}
.type span:nth-of-type(2){
  width: auto;
  text-align: right;
  font-size: .28rem;
  color: #ee5a8a;
}
.noticeSwiper-content{
  border-radius: 0 0 .2rem .2rem;
  height: 30%;
  background: #423f72;
}
.noticeSwiper-list{
  margin-left: .28rem;
}
.noticeSwiper-tittle{
  font-size: .32rem;
  display: block;
  padding-top: .3rem;
  width: 88%;
  height: .35rem;
  line-height: .35rem;
  color: #fff;
}
.noticeSwiper-price{
  display: block;
  width: 88%;
  height: .4rem;
  line-height: .4rem;
  margin: .2rem 0;
  color: #ee5a8a;
}
.noticeSwiper-rate{
  display: flex;
}
.noticeSwiper-rate .rate-box{
  flex: 1;
  height: .5rem;
  position: relative;
}
.rate-box img{
  position: absolute;
  right: 10%;
  bottom: 30%;
  width: .5rem;
  height: .5rem;
}
.rate-content{
  display: block;
  height: auto;
}
.iconwhole{
  color: #ee5a8a;
  font-size: .28rem;
}
.number{
  display: flex;
  flex: 1.5;
  color: #6b5da6;
}
.number span{
  flex: 1;
}
.number span img{
  width: .3rem;
  height: .3rem;
}
.collection{
  display: inline-block;
  text-align: right;
  margin-right: .25rem;
}
.rate-number{
  position: absolute;
  right: 30%;
  top: 0;
  color: #57c5c6;
}
</style>

